/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  SectionList,
  TouchableOpacity,
  Modal,
  Clipboard,
  Image,
} from 'react-native';

var Dimensions = require('Dimensions');

var {width} = Dimensions.get('window');
var {height} = Dimensions.get('window');

// var jsonData = require('./serverAlarm.json')

export default class ServerAlarmSectionListView extends Component {

  constructor(props){
  	super(props);
  	this.state = {
      data:[],
      modalVisible:false,
      moreInfoDetail:'问题详情:',
      moreInfoStatus:'当前状态:',
    };
  }

  componentWillMount() {
    this._requsterData()
  }

  async _requsterData(){

    let data = await require('./serverAlarm.json');

    let jsonData = data.errrList;

    let cityInfos = [];

    let section = {}

    section.key = 1;

    section.data = jsonData;

    cityInfos[0] = section;

    this.setState({
      data:cityInfos
    })


  }

  render() {
    console.log(this.props.screenModalVisible);
    return (
      <View style={styles.container}>
        <Modal
          animationType={'fade'}
          transparent={true}
          visible={this.state.modalVisible}
          onShow={this._startShow}
          onRequestClose={() => {console.log("Modal has been closed.")}}
        >
          <View style={styles.modalBaseViewStyle}>
            <View style={styles.modalCloseBaseViewStyle}>
              <TouchableOpacity
                onPress = {() => this._closeModal()}>
                <Image source={require('../../img/srcImage/img_cancel_back.png')}
                  style={styles.modalCloseViewStyle}>
                </Image>
              </TouchableOpacity>
            </View>
            <View style={styles.modalBottomBaseViewStyle}>
              <View style={styles.modalInfoBaseViewStyle}>
                <Text style={styles.moreInfoDetailViewStyle}>
                  {this.state.moreInfoDetail}
                </Text>
                <Text style={styles.moreInfoDetailViewStyle}>
                  {this.state.moreInfoStatus}
                </Text>
                <View style={styles.copyTouchableOpacityZoneBaseViewStyle}>
                  <TouchableOpacity
                    activeOpacity = {0.5}
                    onPress = {() => this._copyClick()}
                  >
                    <View style={styles.copyZoneBaseViewStyle}>
                      <Text style={styles.copyTextViewStyle}>
                        复制到粘贴板
                      </Text>
                    </View>
                  </TouchableOpacity>
                </View>

              </View>
            </View>
          </View>
        </Modal>
        <Modal
          animationType={'fade'}
          transparent={true}
          visible={this.props.rankModalVisible}
          onShow={this._startShow}
          onRequestClose={() => {console.log("Modal has been closed.")}}
        >
          <View style={styles.modalBaseViewStyle}>
            <View style={styles.modalCloseBaseViewStyle}>
              <TouchableOpacity
                onPress = {() => this._rankClick()}>
                <Image source={require('../../img/srcImage/img_cancel_back.png')}
                  style={styles.modalCloseViewStyle}>
                </Image>
              </TouchableOpacity>
            </View>
            <View style={styles.modalBottomBaseViewStyle}>
              <View style={styles.modalInfoBaseViewStyle}>
                <View style={styles.copyTouchableOpacityZoneBaseViewStyle}>
                  <TouchableOpacity
                    activeOpacity = {0.5}
                    onPress = {() => this._rankClick()}
                  >
                    <View style={styles.copyZoneBaseViewStyle}>
                      <Text style={styles.copyTextViewStyle}>
                        我是排列
                      </Text>
                    </View>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </View>
        </Modal>
        <Modal
          animationType={'fade'}
          transparent={true}
          visible={this.props.screenModalVisible}
          onShow={this._startShow}
          onRequestClose={() => {console.log("Modal has been closed.")}}
        >
          <View style={styles.modalBaseViewStyle}>
            <View style={styles.modalCloseBaseViewStyle}>
              <TouchableOpacity
                onPress = {() => this._screenClick()}>
                <Image source={require('../../img/srcImage/img_cancel_back.png')}
                  style={styles.modalCloseViewStyle}>
                </Image>
              </TouchableOpacity>
            </View>
            <View style={styles.modalBottomBaseViewStyle}>
              <View style={styles.modalInfoBaseViewStyle}>
                <View style={styles.copyTouchableOpacityZoneBaseViewStyle}>
                  <TouchableOpacity
                    activeOpacity = {0.5}
                    onPress = {() => this._screenClick()}
                  >
                    <View style={styles.copyZoneBaseViewStyle}>
                      <Text style={styles.copyTextViewStyle}>
                        我是筛选
                      </Text>
                    </View>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </View>
        </Modal>
        <SectionList
          sections={this.state.data}
          renderItem={this._renderItem}
          keyExtractor={this._keyExtractor}>
        </SectionList>
      </View>
    );
  }

  _renderItem = (item) => {
    // console.log(item);
    var areaText = '地区:'+item.item.area;
    var alarmHost = '告警主机:'+item.item.host;
    var alarmLevel = '告警等级:'+item.item.level;
    var reworkTime = '恢复时间:'+item.item.reworkTime;
    var alarmInfo = '告警信息:'+item.item.info;
    var alarmProject = '告警项目:'+item.item.project;
    return(
      <View style={styles.itemBaseView}>
        <View style={styles.itemBorderViewStyle}>
          <View style={styles.itemTopViewStyle}>
            <Text style={styles.areaTextStyle}>
              {areaText}
            </Text>
            <Text style={styles.alarmHostStyle}>
              {alarmHost}
            </Text>
          </View>
          <View style={styles.itemMiddelViewStyle}>
            <Text style={styles.areaTextStyle}>
              {alarmLevel}
            </Text>
            <Text style={styles.alarmHostStyle}>
              {reworkTime}
            </Text>
          </View>
          <Text style={styles.alarmInfoStyle}>
            {alarmInfo}
          </Text>
          <Text style={styles.alarmProjectStyle}>
            {alarmProject}
          </Text>
          <View style={styles.clickTouchableOpacityZoneStyles}>
            <TouchableOpacity
              activeOpacity = {0.5}
              onPress = {() => this._itemClick(item.item)}
              >
              <View style={styles.clickZoneBaseViewStyle}>
                <Text style={styles.clickTextViewStyle}>
                  查看更多
                </Text>
              </View>
            </TouchableOpacity>
          </View>

        </View>
      </View>
    )
  }

  _itemClick(item){
    console.log('我打开更多也看');
    // console.log(item);
    var detail = this.state.moreInfoDetail + item.detail;
    var status = this.state.moreInfoStatus + item.status;
    this.setState({
      moreInfoDetail:detail,
      moreInfoStatus:status,
      modalVisible:true,
    })
  }

  _rankClick(){
    this.props.rankClick()
  }

  _screenClick(){
    this.props.screenClick()
  }

  _closeModal(){
    console.log('我只关闭');
    this.setState({
      moreInfoDetail:'问题详情:',
      moreInfoStatus:'当前状态:',
      modalVisible:false,
    })
  }


  _keyExtractor = (item) => {
    // console.log(item);
    return item.eventID;
  }

  _copyClick(){

    console.log('我剪切并关闭');

    var copyInfo = this.state.moreInfoDetail + '\n'+this.state.moreInfoStatus;

    Clipboard.setString(copyInfo);

    this.setState({
      moreInfoDetail:'问题详情:',
      moreInfoStatus:'当前状态:',
      modalVisible:false,
    })
    this._setClipboardContent();
  }

  async _setClipboardContent(){
  try {
    var content = await Clipboard.getString();
    console.log(content);
  } catch (e) {
    this.setState({content:e.message});
  }
  }

  _startShow = () => {
    // alert('开始显示了');
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width:width,
    height:300,
    backgroundColor:'white',
  },
  itemBaseView:{
    width:width,
    backgroundColor:'white'
  },
  itemBorderViewStyle:{
    margin:2,
    borderColor:'#BD10E0',
    borderWidth:1,
    borderRadius:10,
  },
  itemTopViewStyle:{
    flexDirection:'row',
    margin:5,
    width:width-20,
  },
  areaTextStyle:{
    width:width/2-40,
    fontSize:13,
  },
  alarmHostStyle:{
    marginLeft:width/2 - (width/2 - 25),
    width:width/2,
    fontSize:13,
  },
  itemMiddelViewStyle:{
    flexDirection:'row',
    margin:5,
    width:width-20,
  },
  alarmInfoStyle:{
    fontSize:13,
    margin:5
  },
  alarmProjectStyle:{
    fontSize:13,
    margin:5
  },
  clickTouchableOpacityZoneStyles:{
    marginTop:5,
    marginBottom:5,
    width:100,
    height:30,
    marginLeft:(width-110)/2,
  },
  clickZoneBaseViewStyle:{
    borderColor:'#BD10E0',
    borderWidth:1,
    borderRadius:5,
    // marginTop:5,
    // marginBottom:5,
    width:100,
    height:30,
    // marginLeft:(width-110)/2,
    alignItems:'center',
    justifyContent:'center'
  },
  clickTextViewStyle:{
    color:'#BD10E0',
  },
  modalBaseViewStyle:{
     backgroundColor:'rgba(0, 0, 0, 0.5)',
     flex:1,
  },
  modalCloseBaseViewStyle:{
    width:20,
    height:20,
    marginTop:25,
    marginLeft:width-35,
  },
  modalCloseViewStyle:{
    width:20,
    height:20,
    // marginTop:25,
    // marginLeft:width-35,
  },
  modalBottomBaseViewStyle:{
    alignItems:'center',
    justifyContent:'center',
    height:height-44,
  },
  modalInfoBaseViewStyle:{
    backgroundColor:'#FFFFFF',
    width:330,
    height:330,
    borderRadius:10,
  },
  moreInfoDetailViewStyle:{
    marginLeft:10,
    marginTop:25,
    marginRight:10,
    fontSize:14,
    lineHeight:20,
  },
  copyTouchableOpacityZoneBaseViewStyle:{
    marginTop:20,
    width:150,
    height:30,
    marginLeft:(330 - 150)/2,
  },
  copyZoneBaseViewStyle:{
    borderColor:'#BD10E0',
    borderWidth:1,
    borderRadius:10,
    // marginTop:20,
    width:150,
    height:30,
    // marginLeft:(330 - 150)/2,
    alignItems:'center',
    justifyContent:'center'

  },
  copyTextViewStyle:{
    color:'#BD10E0'
  }
});
